<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Image Gallery</title>
		<link rel="stylesheet" href="css/layout.css" media="screen"/>
	</head>
	<body>
		<h1>Snapshots</h1>
		<ul id="imagegallery">
			<li>
			<a href="img/fireworks.jpg" title="A fireworks display"><img src="img/tbfireworks.jpg" alt="Firework"/></a>
			</li>
			<li>
				<a href="img/coffee.jpg" title="A cup of black coffee"><img src="img/tbcoffee.jpg" alt="Coffee"/></a>
			</li>
			<li>
				<a href="img/rose.jpg" title="A red, red rose"> <img src="img/tbrose.jpg" alt="Rose" /></a>
			</li>
			<li>
				<a href="img/bigben.jpg" title="The famous clock"><img src="img/tbbigben.jpg" alt="Big Ben"/></a>
			</li>
		</ul>
		<img id="placeholder" src="img/placeholder.gif" alt="my image gallery" />
		<p id="description">choose an image</p>
		
		<script type="text/javascript" src="js/showPic.js"></script>		
		<script> addLoadEvent(prepareGallery)</script>
	</body>
</html>
